<template>
  <div class="login">
    <div class="title">
      <img class="logo" src="../../assets/logo.jpg" alt="logo">
    </div>
    <group class="login-form" label-width="3.5em" label-align="justify">
      <x-input title="用户名" v-model="loginForm.un"></x-input>
      <x-input title="密码" v-model="loginForm.pw" type="password"></x-input>
    </group>
    <div class="rpw">
      <div @click="forgetPassword">
        忘记密码？
      </div>
      <div class="remember-password">
        <input v-model="rememberPassword" type="checkbox" id="rememberPassword" ><label for="rememberPassword">记住密码</label>
      </div>
    </div>
    <div class="login-wrap">
      <x-button @click.native="login" type="primary">登录</x-button>
    </div>
  </div>
</template>

<script>
import {
  Group,
  XButton,
  XInput,
  Toast
} from 'vux'
import { mapMutations } from 'vuex'
import {
  userLogin
} from '../../api/api'
import util from '../../util/util'
export default {
  name: 'login',
  components: {
    Group,
    XButton,
    XInput,
    Toast
  },
  data () {
    return {
      loginForm: {
        UserAgent: navigator.userAgent,
        client_id: 'androidApp',
        un: '',
        pw: ''
      },
      rememberPassword: true
    }
  },
  mounted () {
    if (this.rememberPassword) {
      const user = util.getItem('$rememberPassword')
      this.loginForm.un = user.un
      this.loginForm.pw = user.pw
    }
  },
  methods: {
    login () {
      let loginForm = this.loginForm
      if (!loginForm.un.trim()) {
        this.$vux.toast.text('请输入用户名')
        return
      }
      if (!loginForm.pw.trim()) {
        this.$vux.toast.text('请输入密码')
        return
      }
      userLogin(loginForm).then(res => {
        if (res.status === 200) {
          let data = res.data[0]
          this.saveUserInfo({
            rtk: data.rtk,
            uid: data.uid,
            un: data.un
          })
          util.setItem('$user', data)
          if (this.rememberPassword) {
            util.setItem('$rememberPassword', {
              un: this.loginForm.un,
              pw: this.loginForm.pw
            })
          } else {
            util.removeItem('$rememberPassword')
          }
          this.$router.push({
            path: '/main/home'
          })
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    forgetPassword () {
      this.$router.push({
        path: '/forgetPassword'
      })
    },
    ...mapMutations({
      saveUserInfo: 'user/saveUserInfo'
    })
  }
}
</script>

<style lang="less">
.login{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../../static/images/login_bg.jpg);
  background-position: center;
  background-size: cover;
  .login-wrap{
    padding: 0px 30px 30px 30px;
  }
  .login-form{
    padding: 30px 30px 10px 30px;
    .weui-cells{
      background-color: transparent;
      .weui-cell__hd {
        margin-right: 5px;
      }
      .weui-cell:before {
        left: 0px;
      }
    }
  }
  .title{
    margin-top: 60px;
    text-align: center;
    .logo{
      width: 60px;
      height: 60px;
    }
  }
  .rpw{
    padding: 0 45px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
